今天開始會聊瀏覽器物件所提供的一些基本方法～開始吧！

顯示確認視窗 confirm

對話確認視窗confirm方法，我們之前大多都用alert方法單純顯示資訊，confirm方法則可以要求使用者確認對話窗中顯示的訊息：
w3c參考資料：
https://www.w3schools.com/jsref/met_win_confirm.asp

  <form id="fm">
    <input type="submit" value="送出">
  </form>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      document.getElementById('fm').addEventListener('submit', function (e) {
        if (!window.confirm('確定送出？')) {
          e.preventDefault();
        }
      })
    });
  </script>

上述例子confirm回傳的鈕，當按下取消的時候會呼叫preventDefault方法，取消原本要執行的送出事件。
p.s.:preventDefault MDN補充：
https://developer.mozilla.org/zh-TW/docs/Web/API/Event/preventDefault

計時器功能 setlnterval/setTimeout方法

setlnterval/setTimeout方法常用於，每隔一段時間，變重複執行某個處理。
兩個差異如下：

• setInterval:依指定時間間隔重複執行。
• setTimeout:經過指定時間，執行單次處理。
  語法如下：
  window.setlnterval(func,dur)
  window.setTimeout(func,dur)
  func:欲執行的處理
  dur:時間間隔（隔多久處理一次）

範例：

  <input type="button" value="時間暫停器" id="btn">
  <div id="result"></div>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      //設置計時器
      let timer = window.setInterval(

        //將時間顯示於id=result，每5000毫秒更新一次
        function () {
          let dat = new Date();
          document.getElementById('result').textContent = dat.toLocaleTimeString();
        }, 5000);

      //點擊按鈕暫停計時器
      document.getElementById('btn').addEventListener('click', function () {
        window.clearInterval(timer)
      })
    });
  </script>

上述範例中，使用了setInterval，每5000毫秒(5秒)會更新一次，可以觀察一下。
可以將setInterval更改成setTimeout(clearInterval也要換成clearTimeout)，並觀察比較兩者差異。
w3c例子：
https://www.w3schools.com/jsref/met_win_setinterval.asp
https://www.w3schools.com/jsref/met_win_settimeout.asp

取得/操作顯示頁的位置資訊

點擊按鈕連結至另一個頁面，或重新載入頁面，可以使用location物件。
可以使用的屬性/方法請參考w3c：
https://www.w3schools.com/JSREF/obj_location.asp
下面範例我用到href屬性來示範：

  <label for="isbn">鐵人賽：</label>
  <select name="isbn" id="isbn">
    <option value="">請選擇主題</option>
    <option value="10233627">Day1</option>
    <option value="10233639">Day2</option>
    <option value="10233640">Day3</option>
    <option value="10234061">Day4</option>
    <option value="10234080">Day5</option>
    <option value="10234081">Day6</option>
    <option value="10234774">Day7</option>
    <option value="10234902">Day8</option>
    <option value="10235001">Day9</option>
    <option value="10235161">Day10</option>
    <option value="10235231">Day11</option>
    <option value="10235360">Day12</option>
    <option value="10235422">Day13</option>
    <option value="10235687">Day14</option>
  </select>
  </form>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      document.getElementById('isbn').addEventListener('change', function () {
        location.href = 'https://ithelp.ithome.com.tw/articles/' + this.value;
      })
    });
  </script>

從上述範例可以觀察到，當我們選取到Day6的時候，會觸發change事件，將url組成：https://ithelp.ithome.com.tw/articles/選取值
可以連結到對應的文章(幫自己工商？)

今日總結

• confirm
• setInterval/setTimeout
• 取得/操作顯示頁的位置資訊

今天聊的都是很基本的操作瀏覽器物件的方法
更多的例子可以參照隨附的w3c連結進去做更深入的研究呦！